<template>
  <lay-button @click="changeExpandAll"> 切换 {{ expandKeys }}</lay-button>
  <lay-button @click="getCheckData"> 设置权限 </lay-button>
  <lay-table ref="tableRef" :columns="columns" :data-source="dataSource" :default-expand-all="expandAll" v-model:expandKeys="expandKeys">
    <template #id="{ data }">{{ data }}</template>
    <template #title="{ data }">{{ data }}</template>
    <template #icon="{ data }">{{ data }}</template>
  </lay-table>
</template>

<script lang="ts">
import { ref } from 'vue';
import { layer } from "@layui/layui-vue";

export default {
  name: "MenuTable",
  setup() {

    const tableRef = ref();

    const columns = [
      { fixed: "left", type: "checkbox", width: "10%", },
      { title: "路由", width: "20%", key: "id"},
      { title:"菜单名称", width:"40%", key:"title" },
      { title:"菜单图标", width: "30%", key:"icon" }
    ]

    const dataSource = ref([
      {id: '1', icon: 'layui-icon-set', title: '配置管理', child_menus: [
          {id: '/config/rules', icon: 'layui-icon-link', title: '仿真规则管理'},
          {id: '/config/source', icon: 'layui-icon-link', title: '数据源管理'}
          ]
      },
      {id: '2', icon: 'layui-icon-template-one', title: '仿真场景', child_menus: [
          {id: '/scene/create', icon: 'layui-icon-template', title: '创建场景'},
          {id: '/scene/table', icon: 'layui-icon-template', title: '场景管理'}
          ]
      },
      {id: '3', icon: 'layui-icon-engine', title: '数据管理', child_menus: [
          {id: '/data/basic', icon: 'layui-icon-file', title: '基础数据'},
          {id: '/date/update', icon: 'layui-icon-file', title: '数据更新'},
          {id: '/date/recover', icon: 'layui-icon-file', title: '数据回退'}
          ]
      },
      {id: '4', icon: 'layui-icon-chart-screen', title: '运维管理', child_menus: [
          {id: '/operate/count', icon: 'layui-icon-chart', title: '应用统计'},
          {id: '/operate/log', icon: 'layui-icon-chart', title: '监控日志'}
          ]
      },
      {id: '5', icon: 'layui-icon-group', title: '系统管理', child_menus: [
          {id: '/system/user', icon: 'layui-icon-username', title: '用户管理'},
          {id: '/system/role', icon: 'layui-icon-username', title: '角色管理'},
          {id: '/system/menu', icon: 'layui-icon-username', title: '菜单权限'}
          ]
      },
    ])

    const expandAll = ref(false)

    const expandKeys = ref(["1"])

    const changeExpandAll = () => {
      expandAll.value = !expandAll.value;
    }

    const getCheckData = () => {
      layer.msg(tableRef.value.getCheckData());
    }

    return {
      columns,
      dataSource,
      expandKeys,
      expandAll,
      changeExpandAll,
      getCheckData
    }
  }
}
</script>